<template>
  <div id="tag-map-container">
    <v-header title="客户关系图" :saveShow="false" :showDownloadBtn="false"></v-header>
    <div class="box">
      <div class="box-content">
        <div v-if="source.length > 0" style="height: 100%;">
          <cloud-chart v-if="isCloud" :source="source" @nodeSelect="handleNodeSelect"></cloud-chart>
          <tree v-else :source="treeSource" @goBack="isCloud = true"></tree>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="ecmascript-6">
import ajax from '../../../../api/ajax'
import api from '../../../../api/url'
import {VHeader} from '../../../../components'
import CloudChart from './cloudChart'
import Tree from './tree'

export default {
  name: 'TagMap',

  components: {
    Tree,
    CloudChart,
    VHeader
  },

  data () {
    return {
      isCloud: true,
      treeSource: {},
      source: []
    }
  },

  mounted () {
    const custNo = this.$route.query['cust_no']
    const custName = this.$route.query['cns_name']

    ajax.post(api.USER_TAG_LIST, {'cust_no': '01'})
      .then(res => {
        const children = res.data.map(item => ({id: item['to_cont_id'], label: item['cns_name'], shortLabel: item['org_inst_cns_fs'], children: []}))
        this.source = [
          {
            id: custNo,
            label: custName,
            shortLabel: '',
            children: children
          }
        ]
      })
      .catch(err => {
        console.error(err)
      })
  },

  methods: {
    handleNodeSelect (id) {
      this.findNode(id, this.source)
      this.isCloud = false
    },

    findNode (id, source) {
      for (let i = 0; i < source.length; i++) {
        const item = source[i]
        if (item.id === id) {
          this.treeSource = Object.assign({}, item)
        } else if (item.children && item.children.length > 0) {
          this.findNode(id, item.children)
        }
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
#tag-map-container
  height 100%
  overflow hidden
  .box
    height calc(100% - 56px)
    padding 10px 0 20px 10px
    .box-content
      height 100%
      overflow auto
      background #fff
</style>
